<template>
  <div class="channelEait-container">
    <!-- 这里的布局采用的是组件提供的Cell 单元格 -->
    <!-- 头部区域 -->
    <van-cell :border="false">
      <!-- 左边的内容,依然采用插槽的方式 -->
      <div
        slot="title"
        class="title-text"
      >我的频道</div>
      <!-- 右边的编辑按钮 -->
      <van-button
        type="danger"
        size="small"
        plain
        round
        class="edit-btn"
        @click="editChannels"
      >{{isEdit? "完成":"编辑"}}</van-button>
    </van-cell>
    <!-- 我的频道区域 -->
    <!-- 这里采用了组件提供的Grid 宫格 -->
    <van-grid :gutter="10">
      <van-grid-item
        class="grid-item"
        v-for="(item,index) in myChannels "
        :key="index"
        @click="changeAndDelChannels(item,index,item.id)"
      >
        <!-- 图标 -->
        <van-icon
          v-show="isEdit && !fiexdChannels.includes(item.id)"
          slot="icon"
          name="clear"
        ></van-icon>

        <!-- 下面选择了三元表达式的写法,也可以用 :class="{active:  index === active}" 后面为true时,则添加类,为false不添加 -->
        <span
          slot="text"
          class="text"
          :class="index===active? 'active':''"
        >{{item.name}}</span>
      </van-grid-item>
    </van-grid>

    <!-- 频道推荐区域 -->
    <van-cell :border="false">
      <div
        slot="title"
        class="title-text"
      >频道推荐</div>
    </van-cell>
    <!-- 这里采用了组件提供的Grid 宫格 -->
    <van-grid :gutter="10">
      <van-grid-item
        icon="plus"
        class="grid-item"
        :text="item.name"
        v-for="(item,index) in  recommendChannels"
        :key="index"
        @click="onAddChannels(item)"
      ></van-grid-item>
    </van-grid>
    <!-- ---------------------------------- -->
  </div>
</template>

<script>
// 导入获取所有频道的接口模块
import { getAllChannels, addUserChannels, delUserChannels } from '../../../api/article.js'
// 导入store里面的store数据
import { mapState } from 'vuex'
// 导入storage.js里面的存放数据的方法
import { setToken } from '../../../utils/storage.js'

export default {
  // 组件名称
  name: 'channelEdit',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    // 父组件传递的我的频道的数据
    myChannels: {
      type: Array,
      required: true
    },
    // 父组件传递的active数据
    active: {
      type: Number,
      required: true
    }
  },
  // 组件状态值
  data () {
    return {
      //  用户所有频道的数据源
      allChannels: [],
      isEdit: false, // 控制编辑状态的显示
      fiexdChannels: [0] // 固定频道的id，不允许删除 这个0是id 不是索引
    }
  },
  // 计算属性
  computed: {
    // 获取token
    ...mapState(['token']),
    // 定义获取推荐频道的函数,写在计算属性里面,拿所有的用户频道减去已经选中的用户列表,即可得到推荐的用户频道
    recommendChannels () {
      // 第一种方法
      const channels = []
      this.allChannels.forEach(channel => {
        // find 遍历数组，找到满足条件的元素项，如果没找到则返回undefined
        const ret = this.myChannels.find(myChannel => {
          return myChannel.id === channel.id
        })

        // 如果我的频道中不包括该频道项，则收集到推荐频道中
        if (!ret) {
          channels.push(channel)
        }
      })

      // 把计算结果返回
      return channels
    }
    // 第二种方法
    // recommendChannels () {
    //   // 数组的 filter 方法：遍历数组，把符合条件的元素存储到新数组中并返回
    //   return this.allChannels.filter(channel => {
    //     // const channels = []

    //     // 数组的 find 方法：遍历数组，把符合条件的第1个元素返回
    //     return !this.myChannels.find(myChannel => {
    //       return myChannel.id === channel.id
    //     })

    //     // return channels
    //   })
    // }
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    // 页面一加载,调用获取所有频道的接口函数
    this.loadAllChannels()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 定义获取所有频道的函数
    loadAllChannels: async function () {
      // 调用接口
      try {
        const { data } = await getAllChannels()
        console.log(data)
        // 完成赋值的操作
        this.allChannels = data.data.channels
      } catch (error) {
        this.$toast('获取频道列表数据失败')
      }
    },
    // 添加频道的相关处理函数
    onAddChannels: async function (item) {
      // 把选中的推荐频道里面的项,追加到我的频道数组里面
      this.myChannels.push(item)
      // 添加频道的持久化   在添加频道后,判断用户是否是登录的状态,可以根据是否有token值来判定
      if (this.token) {
        //  如果存在token则说明是登录的状态,这是就要调用接口,发起接口的请求,更新数据库
        await addUserChannels({
          id: item.id, // 频道的id
          seq: this.myChannels.length // 频道的序号
        })
      } else {
        // 如果没有token的值,则证明是没有登录,则把添加的数据保存在本地即可
        setToken('TOUTIAO_CHANNELS', this.myChannels)
      }
    },
    // 点击编辑后的相关操作
    editChannels: function () {
      // 点击后可以随时切换
      this.isEdit = !this.isEdit
    },
    // 点击我的频道模块,切换或者删除的相关处理函数模块
    changeAndDelChannels: function (item, index, id) {
      // 因为点击我的频道模块,有俩种操作,因此在这里需要进一步条件判断
      if (this.isEdit) {
        // 不允许删除第一个推荐
        if (this.fiexdChannels.includes(item.id)) {
          return
        }
        // 一个小BUG的判断 有关模块高亮显示的小问题
        if (index <= this.active) {
          // 与下面的自定义共用一个事件
          this.$emit('updateActive', this.active - 1, true)
        }
        // 完成数组的删除操作
        this.myChannels.splice(index, 1)
        // 这里的删除数据操作的持久化,封装为一个函数了,在这里调用函数
        this.delChannels(item)
      } else {
        // 这是切换的操作
        // 这里用到了子组件向父组件传值 第一个值是子组件自定义的事件名称,第二个是要传的值
        this.$emit('updateActive', index, false)
      }
    },
    // 封装删除相关的持久化的函数
    delChannels: async function (item) {
      // 首先,还是判断是否是登录的状态
      if (this.token) {
        // 登录的状态
        try {
          await delUserChannels(item.id)
        } catch (error) {
          this.$toast('操作失败!', error)
        }
      } else {
        // 未登录的状态 ,把删除后的数组myChannels保存在本地
        setToken('TOUTIAO_CHANNELS', this.myChannels)
      }
    }
  }
}
</script>

<style scoped lang="less">
.channelEait-container {
  padding: 85px 0px;
}
// 推荐部分左侧文本的相关样式
.title-text {
  font-size: 32px;
  color: #333333;
}
// 右侧编辑按钮的相关样式
.edit-btn {
  width: 104px;
  height: 48px;
  font-size: 26px;
  color: #f85959;
  border: 1px solid #f85959;
}
// 频道宫格的相关样式
/deep/ .grid-item {
  width: 160px;
  height: 86px;
  // 右上角的图标
  .van-icon-clear {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 30px;
    color: #cacaca;
    z-index: 2;
  }
  .van-grid-item__content {
    // 不让文字折行
    white-space: nowrap;
    flex-direction: row;
    background-color: #f4f5f6;
    // 图标更新后的操作
    .van-grid-item__icon-wrapper {
      position: unset;
    }

    .text {
      font-size: 28px;
      color: #222;
      margin-top: 0;
    }
    .van-grid-item__text {
      font-size: 28px;
      color: #222222;
      margin-top: 0px;
    }
  }
}
// 加号图标的样式
/deep/ .van-icon-plus {
  font-size: 28px;
  margin-right: 6px;
}
// 弹出层我的频道的高亮显示样式
.active {
  color: red !important;
}
</style>
